body {
    background: #ffffff;
}

.header {
    width: 16rem;
    height: 5.25rem;
    background: linear-gradient(-204deg, #fd465f 0, #fc5b98 100%);
    position: relative;
}

.header .go-back {
    width: 2.5rem;
    height: 2.5rem;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 9;
    cursor: pointer;
}

.header .go-back:active {
    background: rgba(0, 0, 0, .1);
}

.header .go-back img {
    width: 2.5rem;
    height: 2.5rem;
}

.header p.center {
    text-align: center;
    line-height: 2.5rem;
    font-size: .6rem;
    color: #FFFFFF;
}

.header .go-index {
    width: 2.5rem;
    height: 2.5rem;
    position: absolute;
    top: 0;
    right: 0;
    z-index: 9;
    cursor: pointer;
}

.header .go-index:active {
    background: rgba(0, 0, 0, .1);
}

.header .go-index img {
    width: 2.5rem;
    height: 2.5rem;
}

.header p.account {
    position: absolute;
    left: 5.4rem;
    top: 3.1rem;
    color: #FFFFFF;
    font-size: .55rem;
}

.header p.exit {
    width: 3rem;
    height: 1rem;
    border-radius: .5rem;
    background: rgba(255, 255, 255, .2);
    text-align: center;
    line-height: 1rem;
    position: absolute;
    left: 5.4rem;
    top: 4rem;
    font-size: .5rem;
    color: #FFFFFF;
}

.header p.exit:active {
    background: rgba(0, 0, 0, .1);
}

.header .avatar {
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    position: absolute;
    left: 1.85rem;
    bottom: -1.5rem;
}

.header .avatar img {
    width: 3rem;
    height: 3rem;
    border-radius: 1.5rem;
    border:1px solid #F5F5F5;
}

.record {
    width: 16rem;
    height: 2.4rem;
    border-bottom: .5rem solid #F5F5F5;
    background: #FFFFFF;
}

.record .footprint {
    width: 3rem;
    height: 2.4rem;
    margin-left: 5.4rem;
}

.record .footprint:active {
    background: #fafafa;
}

.record .footprint img {
    width: .75rem;
    height: .875rem;
    margin-left: 1.05rem;
    margin-top: .4rem;
}

.record .footprint p {
    text-align: center;
    margin-top: .175rem;
    font-size: .45rem;
    color: #666666;
}

.record .wish {
    margin-left: .5rem;
    width: 3rem;
    height: 2.4rem;
}

.record .wish:active {
    background: #fafafa;
}

.record .wish img {
    width: .85rem;
    height: .725rem;
    margin-left: 1.05rem;
    margin-top: .5rem;
}

.record .wish p {
    text-align: center;
    margin-top: .25rem;
    font-size: .45rem;
    color: #666666;
}

.record .collect {
    width: 3rem;
    height: 2.4rem;
    margin-left: .5rem;
}

.record .collect:active {
    background: #fafafa;
}

.record .collect img {
    width: .8rem;
    height: .75rem;
    margin-left: 1.05rem;
    margin-top: .5rem;
}

.record .collect p {
    text-align: center;
    margin-top: .25rem;
    font-size: .45rem;
    color: #666666;
}

.order {
    width: 16rem;
    border-bottom: .5rem solid #F5F5F5;
    background: #FFFFFF;
}

.order .my-order {
    width: 16rem;
    height: 1.725rem;
    border-bottom: 1px solid #F5F5F5;
}

.order .my-order:active {
    background: #fafafa;
}

.order .my-order img.order-icon {
    width: .725rem;
    height: .825rem;
    margin-left: .5rem;
    margin-top: .475rem;
}

.order .my-order p.title {
    line-height: 1.75rem;
    font-size: .55rem;
    color: #666666;
    margin-left: .65rem;
}

.order .my-order img.a-icon {
    width: .275rem;
    height: .45rem;
    margin-top: .6rem;
    margin-right: .5rem;
}

.order .my-order p.hint {
    line-height: 1.75rem;
    font-size: .5rem;
    color: #999;
    margin-right: .65rem;
}

.order .state {
    width: 16rem;
    height: 3rem;
}

.order .state .pay {
    width: 3.5rem;
    height: 3rem;
    margin-left: 1.9rem;
}

.order .state .pay:active {
    background: #FAFAFA;
}

.order .state .pay img {
    width: 1.075rem;
    height: .9rem;
    margin-left: 1.2rem;
    margin-top: .575rem;
}

.order .state .pay p {
    font-size: .55rem;
    color: #666666;
    text-align: center;
    margin-top: .3rem;
}

.order .state .receipt {
    width: 3.5rem;
    height: 3rem;
    margin-left: .8rem;
}

.order .state .receipt:active {
    background: #FAFAFA;
}

.order .state .receipt img {
    width: 1.075rem;
    height: .9rem;
    margin-left: 1.2rem;
    margin-top: .575rem;
}

.order .state .receipt p {
    font-size: .55rem;
    color: #666666;
    text-align: center;
    margin-top: .3rem;
}

.order .state .returns {
    width: 3.5rem;
    height: 3rem;
    margin-left: .8rem;
}

.order .state .returns:active {
    background: #FAFAFA;
}

.order .state .returns img {
    width: 1.025rem;
    height: .95rem;
    margin-left: 1.2rem;
    margin-top: .575rem;
}

.order .state .returns p {
    font-size: .55rem;
    color: #666666;
    text-align: center;
    margin-top: .25rem;
}

.personal {
    width: 16rem;
    background: #FFFFFF;
}

.personal .integrals {
    width: 16rem;
    height: 1.75rem;
    border-bottom: 1px solid #F5F5F5;
}

.personal .integrals .integral-value {
    color: #666666;
    margin-right: 1rem;
    font-size: 0.5rem;
}

.personal .integrals:active {
    background: #FAFAFA;
}

.personal .integrals img.integration-icon {
    width: .75rem;
    height: .85rem;
    margin-left: .5rem;
    margin-top: .45rem;
}

.personal .integrals p {
    margin-left: .65rem;
    font-size: .55rem;
    color: #666666;
    line-height: 1.75rem;
}

.personal .integrals img.a-icon {
    width: .275rem;
    height: .45rem;
    margin-top: .65rem;
    margin-right: .5rem;
}

.personal .serve {
    width: 16rem;
    height: 1.75rem;
    border-bottom: 1px solid #F5F5F5;
}

.personal .serve:active {
    background: #FAFAFA;
}

.personal .serve img.serve-icon {
    width: .75rem;
    height: .9rem;
    margin-left: .5rem;
    margin-top: .425rem;
}

.personal .serve p {
    margin-left: .65rem;
    font-size: .55rem;
    color: #666666;
    line-height: 1.75rem;
}

.personal .serve img.a-icon {
    width: .275rem;
    height: .45rem;
    margin-top: .65rem;
    margin-right: .5rem;
}

.personal .idea {
    width: 16rem;
    height: 1.75rem;
    border-bottom: 1px solid #F5F5F5;
}

.personal .idea:active {
    background: #FAFAFA;
}

.personal .idea img.idea-icon {
    width: .75rem;
    height: .75rem;
    margin-left: .5rem;
    margin-top: .5rem;
}

.personal .idea p {
    margin-left: .65rem;
    font-size: .55rem;
    color: #666666;
    line-height: 1.75rem;
}

.personal .idea img.a-icon {
    width: .275rem;
    height: .45rem;
    margin-top: .65rem;
    margin-right: .5rem;
}

.personal .address {
    width: 16rem;
    height: 1.75rem;
    border-bottom: 1px solid #F5F5F5;
}

.personal .address:active {
    background: #FAFAFA;
}

.personal .address img.address-icon {
    width: .75rem;
    height: .75rem;
    margin-left: .5rem;
    margin-top: .5rem;
}

.personal .address p {
    margin-left: .65rem;
    font-size: .55rem;
    color: #666666;
    line-height: 1.75rem;
}

.personal .address img.a-icon {
    width: .275rem;
    height: .45rem;
    margin-top: .65rem;
    margin-right: .5rem;
}

.personal .phone {
    width: 16rem;
    height: 1.75rem;
    border-bottom: 1px solid #F5F5F5;
}

.personal .phone:active {
    background: #FAFAFA;
}

.personal .phone img.phone-icon {
    width: .75rem;
    height: .8rem;
    margin-left: .5rem;
    margin-top: .45rem;
}

.personal .phone p {
    margin-left: .65rem;
    font-size: .55rem;
    color: #666666;
    line-height: 1.75rem;
}

.personal .phone img.a-icon {
    width: .275rem;
    height: .45rem;
    margin-top: .65rem;
    margin-right: .5rem;
}